<template>
  <!-- 模块名:实名认证模块
   * 作者:孔德嘉
   * 创建时间:2023/03/13 10:09:29
    -->
  <div>
    <el-card class="box-card" style="width: 100%">
      <!-- 搜索 -->
      <el-card shadow="always">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="formInline.userName"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="formInline.realName"
              placeholder="真实姓名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.auditStatus" placeholder="请选择">
              <el-option
                v-for="item in auditStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              style="color: #d7000f; border: 1px solid #d7000f"
              @click="onSubmit"
              plain
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
      <el-card shadow="always" style="margin-top: 30px">
        <!-- 数据列表 -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" align="center">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="用户名"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="realName"
            label="真实姓名"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="iDNumber"
            label="身份证号"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="140"
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column prop="address" label="家庭住址" width="200">
          </el-table-column> -->
          <el-table-column
            prop="iDCardPhotoFrontUrl"
            label="身份证图片（正面）"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.iDCardPhotoFrontUrl"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="iDCardPhotoBackUrl"
            label="身份证图片（反面）"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.iDCardPhotoBackUrl"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="auditStatus"
            label="审核状态"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <!-- 驳回 -->
              <div v-if="scope.row.auditStatus == 0">
                <span
                  style="
                    font-family: 'Helvetica-Bold', 'Helvetica Bold', 'Helvetica',
                      sans-serif;
                    font-weight: 700;
                    color: #ff3b31;
                  "
                  >●</span
                >
                <span style="margin-left: 8px">驳回</span>
              </div>
              <!-- 通过 -->
              <div v-if="scope.row.auditStatus == 1">
                <span
                  style="
                    font-family: 'Helvetica-Bold', 'Helvetica Bold', 'Helvetica',
                      sans-serif;
                    font-weight: 700;
                    color: #4bd863;
                  "
                  >●</span
                >
                <span style="margin-left: 8px">通过</span>
              </div>
              <!-- 待审核 -->
              <div v-if="scope.row.auditStatus == 2">
                <span
                  style="
                    font-family: 'Helvetica-Bold', 'Helvetica Bold', 'Helvetica',
                      sans-serif;
                    font-weight: 700;
                    color: #f59a23;
                  "
                  >●</span
                >
                <span style="margin-left: 8px">待审核</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="340">
            <template slot-scope="scope">
              <el-button @click="toLookRealName(scope.row)" size="mini"
                >查看</el-button
              >
              <el-button
                @click="toAffirmRealName(scope.row)"
                size="mini"
                style="background-color: #534947; color: #fff"
                v-if="scope.row.auditStatus == 2"
                >确认</el-button
              >
              <el-button
                @click="toUpdateRealName(scope.row)"
                style="background-color: #34262c; color: #fff"
                size="mini"
                v-if="scope.row.auditStatus == 2 || scope.row.auditStatus == 0"
                >编辑</el-button
              >
              <el-button
                @click="toRejectRealName(scope.row)"
                style="background-color: #d7000f; color: #fff"
                size="mini"
                v-if="scope.row.auditStatus == 2"
                >驳回</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="total,prev, pager, next"
          :total="500"
          style="margin-top: 30px"
        >
        </el-pagination>
      </el-card>
    </el-card>

    <!-- 编辑页面 -->
    <!-- 修改实名认证 -->
    <el-dialog title="编辑实名认证" :visible.sync="isOpenUpdateRealName">
      <el-form
        label-position="left"
        ref="updateRealNameForm"
        :model="updateRealNameForm"
        label-width="100px"
      >
        <el-form-item label="用户id" style="display: inline-block">
          <el-input v-model="updateRealNameForm.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item
          label="用户名称"
          style="display: inline-block; margin-left: 80px"
        >
          <el-input v-model="updateRealNameForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" style="display: inline-block">
          <el-input v-model="updateRealNameForm.realName"></el-input>
        </el-form-item>
        <el-form-item
          label="手机号"
          style="display: inline-block; margin-left: 80px"
        >
          <el-input v-model="updateRealNameForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" style="display: inline-block">
          <el-input v-model="updateRealNameForm.iDNumber"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="updateRealNameForm.address"></el-input>
        </el-form-item>
        <el-form-item
          label="身份证正面照片"
          label-width="140px"
          style="display: inline-block"
        >
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="getUpdateIDCardPhotoFrontUrl"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="updateRealNameForm.iDCardPhotoFrontUrl"
              :src="updateRealNameForm.iDCardPhotoFrontUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="身份证反面面照片"
          label-width="140px"
          style="display: inline-block; margin-left: 80px"
        >
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="getUpdateIDCardPhotoBackUrl"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="updateRealNameForm.iDCardPhotoBackUrl"
              :src="updateRealNameForm.iDCardPhotoBackUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isOpenUpdateRealName = false">取 消</el-button>
        <el-button type="primary" @click="isOpenUpdateRealName = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 查看页面 -->
    <!-- 查看实名认证 -->
    <el-dialog title="查看实名认证" :visible.sync="isOpenLookRealName">
      <el-descriptions title="用户信息" border>
        <el-descriptions-item label="用户id">{{
          lookRealNameForm.id
        }}</el-descriptions-item>
        <el-descriptions-item label="用户名称">{{
          lookRealNameForm.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="真实姓名">{{
          lookRealNameForm.realName
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          lookRealNameForm.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="身份证">{{
          lookRealNameForm.iDNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{
          lookRealNameForm.address
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions border :column="2">
        <el-descriptions-item label="身份证正面照片">
          <el-image
            style="width: 140px; height: 140px"
            :src="lookRealNameForm.iDCardPhotoFrontUrl"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="身份证反面照片">
          <el-image
            style="width: 140px; height: 140px"
            :src="lookRealNameForm.iDCardPhotoBackUrl"
          ></el-image>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isOpenLookRealName = false">取 消</el-button>
        <el-button type="primary" @click="isOpenLookRealName = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "realName",
  data() {
    return {
      auditStatus: [
        {
          value: 0,
          label: "驳回",
        },
        {
          value: 1,
          label: "通过",
        },
        {
          value: 2,
          label: "待审核",
        },
      ],
      // 查看实名认证 表单
      lookRealNameForm: {
        id: 0,
        userName: "",
        realName: '""',
        iDNumber: '""',
        phone: "",
        address: "",
        iDCardPhotoFrontUrl: "",
        iDCardPhotoBackUrl: "",
      },
      // 修改实名认证 表单
      updateRealNameForm: {
        id: 0,
        userName: "",
        realName: '""',
        iDNumber: '""',
        phone: "",
        address: "",
        iDCardPhotoFrontUrl: "",
        iDCardPhotoBackUrl: "",
      },
      // 查看实名认证弹窗
      // 默认关闭
      isOpenLookRealName: false,
      // 修改实名认证弹窗
      // 默认关闭
      isOpenUpdateRealName: false,
      // 搜索条件
      formInline: {
        userName: "",
        realName: "",
        auditStatus: "",
      },
      //表格数据
      tableData: [
        {
          id: 10001,
          userName: "johndoe123",
          realName: "王小明",
          iDNumber: "510107199012303612",
          phone: "13888888888",
          address: "四川省成都市高新区天府大道中段666号",
          iDCardPhotoFrontUrl:
            "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          iDCardPhotoBackUrl:
            "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          auditStatus: 0,
          createTime: "2022-02-20 14:30:00",
        },
        {
          id: 10002,
          userName: "sarahlee456",
          realName: "李小红",
          iDNumber: "310110199508201234",
          phone: "13666666666",
          address: "上海市徐汇区漕河泾开发区虹梅路888弄777号",
          iDCardPhotoFrontUrl:
            "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          iDCardPhotoBackUrl:
            "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          auditStatus: 1,
          createTime: "2022-03-01 09:45:00",
        },
        {
          id: 10003,
          userName: "mikejohnson789",
          realName: "张大千",
          iDNumber: "440106195912121234",
          phone: "13777777777",
          address: "广东省广州市天河区珠江新城华夏路1号",
          iDCardPhotoFrontUrl:
            "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          iDCardPhotoBackUrl:
            "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          auditStatus: 2,
          createTime: "2022-03-11 16:15:00",
        },
      ],
    };
  },
  methods: {
    //查看实名认证信息
    toLookRealName(row) {
      //打开查看页面
      //显示窗口
      this.isOpenLookRealName = true;
      //把row只给updateRealNameForm
      this.lookRealNameForm = row;
    },
    // 创建地址
    getUpdateIDCardPhotoBackUrl(res, file) {
      this.updateRealNameForm.iDCardPhotoBackUrl = URL.createObjectURL(
        file.raw
      );
    },
    // 创建地址
    getUpdateIDCardPhotoFrontUrl(res, file) {
      this.updateRealNameForm.iDCardPhotoFrontUrl = URL.createObjectURL(
        file.raw
      );
    },
    // 上传之前判断
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 通过确认实名验证消息
    toAffirmRealName(row) {
      this.$message({
        message: row.userName + "用户的实名认证信息通过！",
        type: "success",
      });
    },
    //驳回实名验证消息
    toRejectRealName(row) {
      this.$prompt("请输入驳回原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "驳回成功!原因是" + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消驳回",
          });
        });
    },
    //打开修改实名认证窗口
    toUpdateRealName(row) {
      //显示窗口
      this.isOpenUpdateRealName = true;
      //把row只给updateRealNameForm
      this.updateRealNameForm = row;
    },
    // 根据真实姓名搜索
    onSubmit() {},
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  font-size: 12px;
  color: #999999;
  font-weight: 400;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(228, 228, 228, 1);
  background-color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  /**分页被选中的背景颜色 */
  background-color: #d7000f;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  /**分页 鼠标移入被 选中的字体颜色 */
  color: #d7000f;
}
.el-button--primary {
  /**修改实名认证页面 确定按钮 */
  color: #fff;
  background-color: #d7000f;
  border-color: #d7000f;
}
.el-button--primary:focus,
.el-button--primary:hover {
  /**修改实名认证页面 确定按钮 */
  background: #e96a72;
  border-color: #e96a72;
  color: #fff;
}
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  /**页面 最上方 输入框 */
  border-color: #d7000f;
}
.el-range-editor.is-active,
.el-range-editor.is-active:hover,
.el-select .el-input.is-focus .el-input__inner {
  /**页面 最上方 选择框 */
  border-color: #d7000f;
}
.el-select-dropdown__item.selected {
  /**页面 最上方 选择框 中被选中的选项 */
  color: #d7000f;
}
.el-select .el-input__inner:focus {
  /**页面 最上方 选择框 */
  border-color: #d7000f;
}
/**图片上传 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-button:focus,
.el-button:hover {
  /**取消修改*/
  color: #d7000f;
  border-color: #c07676;
  background-color: #ffecec;
}
</style>